<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-filter flex">
				<div class="fil-label">办案中心类型：</div>
				<div class="flex_bd">
					<el-radio-group v-model="styleV" size="small" @change="change">
						<el-radio v-for="(item,index) in filstyles" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
				</div>
				<div class="fil-select" @click="filToggle">
					<div v-if="filshow == 10"><span>展开</span><span class="el-icon-arrow-down"></span></div>
					<div v-else><span>收起</span><span class="el-icon-arrow-up"></span></div>
				</div>
			</div>
			<div class="bs-filter flex-center">
				<div class="fil-label">其他选项：</div>
				<div class="flex_bd flex-center fil-form">
					<el-form size="small" :inline="true" ref="form" :model="form">
						<el-form-item label="作者">
							<el-select v-model="form.author" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="好评度">
							<el-select v-model="form.raty" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="fil-button">
					<el-button size="small" type="primary">查询</el-button>
					<el-button size="small" type="default">清空</el-button>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<div class="bs-panel_bd">
				<ul class="user-data user-lg-data flex-center">
					<li class="flex-col" v-for="item in dataList" :key="item">
						<div class="value" :style="{'color': item.color}"><span class="v" >{{item.value}}</span>个</div>
						<div class="txt">{{item.text}}</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="bs-panel">
			<div class="bs-filter bs-list-filter flex">
				<div class="fil-label">发布列表</div>
				<div class="flex_bd flex-center">
					<el-radio-group v-model="listV" size="small" >
						<el-radio v-for="(item,index) in listVtag" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
					<div class="fil-search">
						<el-input
							size="small"
							placeholder="请输入"
							v-model="searchV">
							<div @click="searchOpen" class="fil-so-btn" slot="suffix"><i class="el-icon-search"></i></div>
						</el-input>
					</div>
				</div>
				<div class="fil-button">
					<el-button type="primary">添加</el-button>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<ul class="carr-list">
				<li class="flex-center" v-for="(item,index) in lists" :key="index">
					<div class="carr-info flex-center">
						<div class="pic"><img :src="item.bg" ></div>
						<div class="flex_bd">
							<div class="title">{{item.title}}</div>
							<div class="info">{{item.desc}}</div>
						</div>
					</div>
					<div class="carr-attr">
						<div class="text">审核人</div>
						<div class="value">小明</div>
					</div>
					<div class="carr-attr carr-lg-attr">
						<div class="text">开始时间</div>
						<div class="value">2021-02-02 12:23</div>
					</div>
					<div class="carr-progress">
						<el-progress :percentage="100" :status="item.status"></el-progress>
					</div>
					<div class="carr-action flex-center">
						<el-link type="primary">预览</el-link>
						<el-dropdown>
							<el-link type="primary">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>更多1</el-dropdown-item>
								<el-dropdown-item>更多2</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</li>
			</ul>
			<div class="carry-pages flex-center">
				<el-pagination
					background
					layout="prev, pager, next ,total ,jumper"
					:total="1000">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				dataList:[
					{
						text:'审核中',
						value:'55',
						color:'#0080ff'
					},
					{
						text:'未通过',
						value:'6',
						color:'#0080ff'
					},
					{
						text:'今日发布',
						value:'8',
						color:'#ff0000'
					}
				],
				styleV: "1",
				filshow: 10000,
				filstyles: [{
						title: '全部',
						value: '1',
					},
					{
						title: '类目一',
						value: '2',
					},
					{
						title: '类目二',
						value: '3',
					},
					{
						title: '类目三',
						value: '4',
					},
					{
						title: '类目四',
						value: '5',
					},
					{
						title: '类目五',
						value: '6',
					},
					{
						title: '类目六',
						value: '7',
					},
					{
						title: '类目七',
						value: '8',
					},
					{
						title: '类目八',
						value: '9',
					},
					{
						title: '类目九',
						value: '10',
					},
					{
						title: '类目十',
						value: '11',
					},
					{
						title: '类目十一',
						value: '12',
					},
					{
						title: '类目十二',
						value: '13',
					},
				],
				form: {
					author: '1',
					raty: '1',
				},
				searchV:'',
				listV: "1",
				listVtag: [{
						title: '全部',
						value: '1',
					},
					{
						title: '未通过',
						value: '2',
					},
					{
						title: '审核中',
						value: '3',
					},
				],
				lists: [{
						title: '我和我的祖国',
						desc: '我爱我的祖国，祖国万岁',
						bg: require('../../assets/images/er/sppic.png'),
						status:""
					},{
						title: '我和我的祖国',
						desc: '我爱我的祖国，祖国万岁',
						bg: require('../../assets/images/er/sppic.png'),
						status:"exception"
					},{
						title: '我和我的祖国',
						desc: '我爱我的祖国，祖国万岁',
						bg: require('../../assets/images/er/sppic.png'),
						status:"success"
					},{
						title: '我和我的祖国',
						desc: '我爱我的祖国，祖国万岁',
						bg: require('../../assets/images/er/sppic.png'),
						status:""
					},{
						title: '我和我的祖国',
						desc: '我爱我的祖国，祖国万岁',
						bg: require('../../assets/images/er/sppic.png'),
						progress:50,
						status:""
					},
				],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
			this.drawLine(); //执行下面的函数
		},
		methods: {
			searchOpen(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
				});
				setTimeout(() => {
					loading.close();
				}, 2000);
			},
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			change(e) {
				console.log(e)
			},
			filToggle() {
				if (this.filshow == 10) {
					this.filshow = 10000
				} else {
					this.filshow = 10
				}
			},
			drawLine() {
				var colorList = ['#1aaeba', '#0080ff']
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item'
					},
					series: [{
						type: 'pie',
						center: ['50%', '50%'],
						radius: ['50%', '70%'],
						clockwise: true,
						avoidLabelOverlap: true,
						hoverOffset: 15,
						itemStyle: {
							normal: {
								color: function(params) {
									return colorList[params.dataIndex]
								}
							}
						},
						label: {
							show: true,
							position: 'outside',
						},
						labelLine: {
							normal: {
								length: 20,
								length2: 30,
								lineStyle: {
									width: 1
								}
							}
						},
						data: [{
							'name': '数据1',
							'value': 15
						}, {
							'name': '数据2',
							'value': 54
						}, ],
					}]
				});
			}
		}
	}
</script>
